<template>
  <!-- <a-modal
    title="Title"
    :visible="visible"
    width="950px"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  > -->
  <div>
    <div style="border: 1px solid #ccc; padding: 20px; width: 900px">
      <svg class="dagre" width="850" height="900">
        <g class="container"></g>
      </svg>
      <div ref="tooltip" class="tooltip">
        <div>节点ID：{{ currentNode.id }}</div>
        <div>节点名称：{{ currentNode.nodeName }}</div>
      </div>
    </div>
    123
  </div>

  <!-- </a-modal> -->
</template>

<script>
import dagreD3 from 'dagre-d3'
import * as d3 from 'd3'

export default {
  name: 'dagre',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      currentNode: {
        id: null,
        nodeName: '',
      },
      nodes: [
        {
          id: 0,
          nodeName: '开始',
        },
        {
          id: 1,
          nodeName: '卫星向地面网络管控发送频谱感知结果信息',
        },
        {
          id: 2,
          nodeName: '地面网络管控进行上下行链路抗干扰决策分析',
        },
        {
          id: 3,
          nodeName: '星弹链路上行频点是否需要切换',
        },
        {
          id: 4,
          nodeName: '地面网络管控向指控车发送抗干扰频点切换决策信息',
        },
        {
          id: 5,
          nodeName: '指控车向地面网络管控回复抗干扰频点切换确认信息',
        },
        {
          id: 6,
          nodeName: '地面网络管控向卫星发送抗干扰接收机频点配置指令',
        },
        {
          id: 7,
          nodeName: '星弹链路下行速率挡位是否需要切换',
        },
        {
          id: 8,
          nodeName: '地面网络管控向指控车发送抗干扰速率档位切换决策信息',
        },
        {
          id: 9,
          nodeName: '指控车向地面网络管控回复抗干扰速率档位切换确认信息',
        },
        {
          id: 10,
          nodeName: '地面网络管控向卫星发送下行链路速率档位调整指令',
        },
        {
          id: 11,
          nodeName: '地面网络管控向指控车发送下行链路速率档位信息',
        },
        {
          id: 12,
          nodeName: '结束',
        },
      ],
      edges: [
        {
          start: 0,
          end: 1,
        },
        {
          start: 1,
          end: 2,
        },
        {
          start: 2,
          end: 3,
        },
        {
          start: 3,
          end: 4,
        },
        {
          start: 4,
          end: 5,
        },
        {
          start: 5,
          end: 6,
        },
        {
          start: 6,
          end: 12,
        },
        {
          start: 2,
          end: 7,
        },
        {
          start: 7,
          end: 8,
        },
        {
          start: 8,
          end: 9,
        },
        {
          start: 9,
          end: 10,
        },
        {
          start: 10,
          end: 11,
        },
        {
          start: 11,
          end: 12,
        },
      ],
    }
  },
  mounted() {
    // this.draw()
  },
  methods: {
    // showModal(record) {
    //   this.visible = true
    //   // this.obj = JSON.parse(record)
    // },
    // handleOk(e) {
    //   this.confirmLoading = true
    //   setTimeout(() => {
    //     this.visible = false
    //     this.confirmLoading = false
    //   }, 2000)
    // },
    // handleCancel(e) {
    //   console.log('Clicked cancel button')
    //   this.visible = false
    // },
    // 绘制简单的流程图
    draw() {
      // 创建 Graph 对象
      const g = new dagreD3.graphlib.Graph()
        .setGraph({
          rankdir: 'TB', // 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'
        })
        .setDefaultEdgeLabel(function () {
          return {}
        })

      // Graph添加节点
      this.nodes.forEach((node) => {
        if (node.id == 3 || node.id == 7) {
          g.setNode(node.id, {
            id: node.id,
            label: node.nodeName,
            shape: 'diamond', //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
            style: 'fill:transparent;stroke:rgba(0, 0, 0, 0.65)', //节点样式,可设置节点的颜色填充、节点边框
            labelStyle: 'fill: rgba(0, 0, 0, 0.65);font-weight:bold', //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
            rx: 5, // 设置圆角
            ry: 5, // 设置圆角
            paddingBottom: 15,
            paddingLeft: 20,
            paddingRight: 20,
            paddingTop: 15,
          })
        } else {
          g.setNode(node.id, {
            id: node.id,
            label: node.nodeName,
            shape: 'rect', //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
            style: 'fill:transparent;stroke:rgba(0, 0, 0, 0.65)', //节点样式,可设置节点的颜色填充、节点边框
            labelStyle: 'fill: rgba(0, 0, 0, 0.65);font-weight:bold', //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
            rx: 5, // 设置圆角
            ry: 5, // 设置圆角
            paddingBottom: 15,
            paddingLeft: 20,
            paddingRight: 20,
            paddingTop: 15,
          })
        }
      })

      // Graph添加节点之间的连线
      if (this.nodes.length > 1) {
        this.edges.forEach((edge) => {
          g.setEdge(edge.start, edge.end, {
            style: 'stroke: rgba(0, 0, 0, 0.65); fill: none; stroke-width: 2px', // 连线样式
            arrowheadStyle: 'fill: rgba(0, 0, 0, 0.65);stroke: rgba(0, 0, 0, 0.85);', //箭头样式，可以设置箭头颜色
            arrowhead: 'normal', //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
          })
        })
      }

      // 获取要绘制流程图的绘图容器
      const container = d3.select('svg.dagre').select('g.container')

      // 创建渲染器
      const render = new dagreD3.render()
      // 在绘图容器上运行渲染器绘制流程图
      render(container, g)

      // 拖拽缩放
      const svg = d3.select('svg.dagre')
      let zoom = d3
        .zoom()
        .scaleExtent([0.5, 2])
        .on('zoom', (current) => {
          container.attr('transform', current.transform)
        })
      svg.call(zoom)

      // 鼠标悬停显示隐藏tooltip
      const that = this
      const tooltipBox = that.$refs.tooltip
      container
        .on('mouseover', (e) => {
          that.currentNode = that.nodes.filter((item) => item.id === Number(e.target.__data__))[0]
          tooltipBox.style.display = 'none'
          // tooltipBox.style.display = 'block'
          tooltipBox.style.top = e.clientY + 20 + 'px'
          tooltipBox.style.left = e.clientX + 'px'
        })
        .on('mouseout', function () {
          tooltipBox.style.display = 'none'
        })
    },
  },
}
</script>

<style scoped>
.tooltip {
  position: absolute;
  font-size: 12px;
  background-color: white;
  border-radius: 3px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  cursor: pointer;
  display: none;
  padding: 10px;
}

.tooltip > div {
  padding: 10px;
}
</style>
